import React, { useContext } from "react";
import { Layout, Dropdown, theme } from "antd";
import "./style.scss";
import logo from "../../logo.svg";
import { DownOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'
import taiyang from '../../assets/images/icon-test.png'
import yueliang from '../../assets/images/yejing.png'
import { themeContext } from "../../context";

const { Header } = Layout;  
const Index = () => {
  const navigate = useNavigate()
  const userInfo = JSON.parse(localStorage.getItem('userInfo')) || {};
  const menu = {
    items: [
      {
        key: '1',
        label: '浏览记录'
      },
      {
        key: '2',
        label: '个人信息'
      },
      {
        key: '3',
        label: '修改密码'
      },
      {
        key: '4',
        label: '推出登录'
      }
    ],
    onClick(e) {
      if(e.key === "4") {
        localStorage.removeItem('token')
        localStorage.removeItem('userInfo')
        navigate('/login')
      }
    }
  }
  const { theme, setTheme } = useContext(themeContext);
  const changeTheme  = () => {
    if(theme === 'light') {
      setTheme('dark')
    } else {
      setTheme('light')
    }
  
  }
  return (
    <Header className="header">
      <div className="left">
        <img src={logo} height="40" alt=""></img>
        <h2>水平能力有限公司</h2>
      </div>
      <div className="right">
        <img src={userInfo.avator} height="40" alt=""></img>

        <Dropdown.Button style={{ margin: '0 10px' }} icon={<DownOutlined />} menu={menu}>
          <span>{userInfo.nickname}</span>
        </Dropdown.Button>

        <img src={theme === 'light' ? taiyang : yueliang} alt="" height={40} onClick={() => changeTheme()}/>
      </div>
    </Header>
  );
};

export default Index;



// hoc 高洁组件